import { Input, Select, Cascader, Button } from 'antd'
import { memo, useContext } from 'react'
import { useRecoilValue } from 'recoil'
import { reportDetailsContext } from '../../_context'
import { isNullArray } from '@/utils'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'
import { dictValues } from '@/store/dicts'
import { theQuarterData } from '@/store/user'

export default memo(() => {
  const dictValuesList = useRecoilValue(dictValues)
  const quarterData = useRecoilValue(theQuarterData)

  const {
    areaList,
    seleteTask,
    hospitalName,
    handleTaskChange,
    handleAreaChange,
    handleStatusChange,
    handleHospitalChange,
    getTableInfo,
    exportDocument,
    area,
    status,
  } = useContext(reportDetailsContext)

  return (
    <div className={styles.search}>
      <div className={styles.inputs}>
        <Input
          value={hospitalName}
          suffix={<IconSvg name='search' onClick={getTableInfo} />}
          className={styles.width200}
          placeholder='搜索医院名称'
          onChange={(e) => handleHospitalChange(e)}
          onPressEnter={getTableInfo}
        />
        <Cascader
          className={styles.width200}
          value={seleteTask}
          onChange={(e) => handleTaskChange(e)}
          options={quarterData}
          placeholder='请选择任务'
          displayRender={(value) => value.join('')}
          allowClear={false}
        />
        <Select
          className={styles.width200}
          onChange={(e) => handleAreaChange(e)}
          key={'value'}
          value={area}
          options={[{ value: '', label: '全部' }, ...areaList]}
          placeholder={'请选择地区'}
        />
        <Select
          className={styles.width200}
          value={status}
          onChange={(e) => handleStatusChange(e)}
          options={[{ label: '全部', value: '' }, ...dictValuesList.report_status]}
          placeholder='请选择状态'
        />
      </div>
      <Button
        onClick={() => exportDocument()}
        className={styles.exportbtn}
        type='primary'
        ghost
        icon={<IconSvg name='export' />}
      >
        导出
      </Button>
    </div>
  )
})
